<template>
    <div >  
        <el-table
                :data="tableData.filter(data => !search || data.realName.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%"
                stripe
                id="out-table">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="昵称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="realName"
                    label="姓名"
                    width="120">
            </el-table-column>
            <!-- <el-table-column 
                    prop="college" 
                    label="专业" 
                    width="180" 
                    :filters="[{ text: '2019级计算机', value: '2019级计算机' },
                        { text: '2018级计算机', value: '2018级计算机' },
                        { text: '2022级计算机', value: '2022级计算机' }]"
                    :filter-method="filterTag" 
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag 
                        :type="scope.row.college === '2019级计算机' ? 'primary' : 'success'"
                        disable-transitions>{{scope.row.college}}</el-tag>
                </template>
            </el-table-column> -->
            <el-table-column
                    prop="college"
                    label="专业"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系方式"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="scope"
                    label="积分"
                    width="120"
                    sortable>
            </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入姓名关键字搜索"/>
            </template>

            <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="primary" round size="small">修改</el-button>
                 <el-button @click="deleteBook(scope.row)" type="danger" round size="small">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        <!--给按钮绑定事件-->
        <div class="toexcel">
            <el-button 
             @click="exportExcel" 
             type="info" 
             round
             class="button" 
             style=" position:absolute; bottom:5px; right:50px"
             >导出当前页用户信息
             </el-button>
        </div>
        
<!-- 分页 -->
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="page">
        </el-pagination>
        
    </div>
</template>

<script>
    // 引入导出Excel表格依赖
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    export default {
    name: "javascriptthree",
        data() {
            return {
                pageSize:'',
                total:'',
                tableData: [],
                search:'',
            }
        },
        methods: {
            exportExcel() {
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "用户信息.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        },
            deleteBook(row){
                const _this = this
                axios.delete('http://localhost:8181/book/deleteById/'+row.id).then(function(resp){
                    _this.$alert('用户“'+row.realName+'”删除成功！', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            window.location.reload()
                        }
                    })
                })
            },
      
            // 编辑
            edit(row) {
                this.$router.push({
                    path: '/update',
                    query:{
                        id:row.id
                    }
                })
            },
            page(currentPage){
                const _this = this
                axios.get('http://localhost:8181/book/findAll/'+(currentPage-1)+'/10').then(function(resp){
                    console.log(resp)
                    _this.tableData = resp.data.content
                    _this.pageSize = resp.data.size
                    _this.total = resp.data.totalElements
                })
            } 
        },
            created() {
                const _this = this
                axios.get('http://localhost:8181/book/findAll/0/15').then(function(resp){
                   console.log(resp)
                    _this.tableData = resp.data.content
                    _this.pageSize = resp.data.size
                    _this.total = resp.data.totalElements
                })
            },
    }
</script>
<style scoped>
.table {
    width: 100%;
    height: 300px;
    }
.toexcel {
  cursor: pointer;
  cursor: hand;
  width: 70px;
  height: 34px;
}
</style>